YUI.add("participantsListView", function(Y) {
    ParticipantEvent = Y.ParticipantEvent;
   
	function ParticipantsListView(config) {
		ParticipantsListView.superclass.constructor.apply(this, arguments);
		 
	}
	
	ParticipantsListView.NAME = "participantsListView";
		
	ParticipantsListView.LOAD_PARITICIPANT_AVATAR_DELAY = 400;
	
	ParticipantsListView.ATTRS = { 
	}
	
	Y.extend(ParticipantsListView, Y.Base, {
		
	    initializer : function(config) {  	
			this._container = config.container; 
	    	this._timer;
	    	
	    	
	    	this._eventHandles = {
                 listScroll:null,
                 
            };
	    	 
	    }, 
	 	
	 	 
	 	
	    // Tasks MyClass needs to perform during  
	    // the destroy() lifecycle phase 
	    destructor : function() { 
	        Y.Event.purgeElement(this._wrapper); 
	        this._wrapper.get("parentNode").removeChild(this._wrapper); 
	        this._wrapper = null; 
	    } ,
	    _handleScroll : function(e) { 
 	    	//that._showParticipantsAvatars();
 	    	if(this._timer) 
 				this._timer.cancel();  
 			
 			Y.fire(ParticipantEvent.ListView.LIST_SCROLL); 
			this._timer = Y.later(Y.ParticipantsListView.LOAD_PARITICIPANT_AVATAR_DELAY, this, this._showParticipantsAvatars );
 	    	
	    },
 		_showParticipantsAvatars : function() {
 			 
 	    	if(this._timer)
 			{
 				this._timer.cancel();
 				this._timer = null;
 			}
 			 
 			var container = this._container;
 			var startY = container.getY(); 
 	    	var endY = startY + parseInt(container.getStyle('height')); 
 	    	var list = container.queryAll(".participantsListItem"); 
 	    
 	    	var len = list.size();
 	    	for(var i =0; i < len; i++)
 	    	{
 	    		var node = list.item(i);  
 	    		
 	    		if(node.getY() < startY - 30)
 	    			continue;
 	    			
 	    		if(node.hasClass("participantsListItemWithBg"))
 	    			continue;
 	    			 
 	    		node.setStyle("backgroundImage" , "url('http://127.0.0.1/ChatWidget/assets/blank_avatar_sml.jpg')");
 	    		node.addClass("participantsListItemWithBg"); 
 	    		
 	    		if( node.getY() > endY + 60)
 	    			return;
 	    	}
 	    		
 		},

/**
 * This render function gets called once when the widget first loads
 * And it renders the list of the participants.
 */
		render : function(participantsList)
		{  
			var listHtml = "";
			for(var i =0 ; i < participantsList.length; i++)
			{
				var participantModel = participantsList[i]; 
				var nodeHtml = "<div id='" + participantModel.get("GUID") + "' title='' class='participantsListItem'>" + participantModel.get("nickname") + "</div>";
				listHtml += nodeHtml;
			}
			
			this._container.set("innerHTML",listHtml);	 
			
			this._clearHandles();
			this._addHandles();
			
			this._handleScroll(null, this);
			Y.fire(ParticipantEvent.ListView.LIST_RENDERED);
		},
		_onAddParticipant : function(participantModel)
		{
			if(!participantModel)return;
			 var nodeHtml = "<div id='" + participantModel.get("GUID") + "' title='' class='participantsListItem'>" + participantModel.get("nickname") + "</div>";
			this._container.append ( nodeHtml ); 
				
		},
		_onRemoveParticipant : function(guid)
		{
			var list = this._container.queryAll(".participantsListItem");  	    
 	    	var len = list.size();
 	    	for(var i =0; i < len; i++)
 	    	{
 	    		var node = list.item(i); 
 	    		if((LOCAL && node.get("id").indexOf(guid) == 0)||(node.get("id") == guid))
 	    		{ 
 	    			node.remove();
 	    			if(LOCAL)return;
 	    		}
 	    	} 
		},
		
		_addHandles : function()
		{
			this._eventHandles.removeParticipant = Y.on(ParticipantEvent.ADD_PARTICIPANT ,Y.bind( this._onAddParticipant, this) );
			
			this._eventHandles.removeParticipant = Y.on(ParticipantEvent.REMOVE_PARTICIPANT ,Y.bind( this._onRemoveParticipant, this) );
			this._eventHandles.listScroll = Y.on("scroll", Y.bind(this._handleScroll, this),  this._container  ); 
			
		},
		_clearHandles : function() {
            var eventHandles = this._eventHandles;
 
            if (eventHandles.listScroll) {
                eventHandles.listScroll.detach();
                eventHandles.listScroll = null;
            }
            if(eventHandles.removeParticipant)
            {
            	eventHandles.removeParticipant.detach();
            	eventHandles.removeParticipant = null
            }
 		 }
	});
            
	Y.ParticipantsListView = ParticipantsListView;		
	} , 0.1 );